<template>
  <div class="draggable-wrap">

    <mu-paper class="list1">
      <draggable :list = 'list1' :options="{group:'article'}">
        <div class="drap-list" v-for="(element,index) in list1" :key="element.id">
          <span> {{element.name}}</span>
          <a :style='{"background-color":element.color}' class="close"  @click='handleClose(list1,index)'>关闭</a>
        </div>
      </draggable>
    </mu-paper>

    <mu-paper class="list2">
      <draggable :list = 'list2' :options="{group:'article'}">
        <div class="drap-list" v-for="(element,index) in list2" :key="element.id">
          <span> {{element.name}}</span>
          <a :style='{"background-color":element.color}' class="close" @click='handleClose(list2,index)'>关闭</a>
        </div>
      </draggable>
    </mu-paper>

    </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable,
  },
  props: {
    list1: {
      require: true,
      default: []
    },
    list2: {
      require: true,
      default: []
    }
  },
  methods: {
    handleClose (list, index) {
      if (list.length <= 1) return
      list.splice(index, 1)
    }
  },

}
</script>

<style scoped lang='less'>
.draggable-wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  & > div {
    padding: 20px;
    width: 49%;
  }

  .drap-list {
    padding: 0 16px;
    width: 100%;
    line-height: 48px;
    transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    &:hover {
      background-color: rgba(0, 0, 0, 0.1);
    }

    a.close {
      height: 20px;
      display: inline-block;
      line-height: 20px;
      padding: 0 6px;
      border-radius: 3px;
      font-size: 12px;
      font-weight: bold;
      color: #fff;
      background-color: gold;
      cursor: pointer;
    }
  }
}
</style>